<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2018 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<!-- GENERIC MODAL -->
<winery-modal *ngIf="modalVariantAndState.modalVisible"
              bsModal #modal="bs-modal" [modalRef]="modal" [size]="'modal-lg'" (onHidden)="resetModalData()">
    <winery-modal-header *ngIf="modalVariantAndState.modalVariant === 'deployment_artifacts' ||
                                modalVariantAndState.modalVariant === 'policies'"
                         [title]="'Add ' + modalVariantAndState.modalTitle" [modalRef]="modal">
    </winery-modal-header>
    <!-- DEPLOYMENT_ARTIFACT OR POLICY BODY -->
    <winery-modal-body>
        <form #addDeploymentArtifactOrPolicyForm="ngForm" id="addDeploymentArtifactOrPolicyForm"
              enctype="multipart/form-data">
            <fieldset>
                <div class="form-group">
                    <label>Name</label>
                    <input [(ngModel)]="deploymentArtifactOrPolicyModalData.modalName" class="form-control"
                           name="modalName"
                           required
                           [disabled]="modalVariantForEditDeleteTasks !== '(none)'"
                           id="modalName" type="text" autocomplete="on"/>
                </div>
                <div class="radio"
                     *ngIf="modalVariantAndState.modalVariant === 'deployment_artifacts' && modalVariantForEditDeleteTasks === '(none)'">
                    <label>
                        <input type="radio" name="templateCreation" value="createArtifactTemplate"
                               checked="checked" id="createArtifactTemplateInput"
                               [(ngModel)]="modalSelectedRadioButton"/>Create Artifact Template
                    </label>
                    <p class="help-block">If you want to add files to this deployment artifact you can do so via <a
                        target="_blank" href="{{getHostUrl()+'#/artifacttemplates'}}">Winery's management UI</a>,
                        after creating this deployment artifact.</p>
                </div>
                <div class="radio" *ngIf="modalVariantForEditDeleteTasks === '(none)'">
                    <label>
                        <input type="radio" name="templateCreation" value="link{{modalVariantAndState.modalVariant}}"
                               id="linkArtifactTemplateOrPolicyTemplateInput"
                               [(ngModel)]="modalSelectedRadioButton"/>
                        <div *ngIf="modalVariantAndState.modalVariant === 'deployment_artifacts'"
                             style="display: inline-block;">Link Artifact Template
                        </div>
                        <div *ngIf="modalVariantAndState.modalVariant === 'policies'" style="display: inline-block;">
                            Link Policy Template
                        </div>
                    </label>
                    <p class="help-block">Check if you want to reuse existing files.</p>
                </div>
                <div class="radio" *ngIf="modalVariantForEditDeleteTasks === '(none)'">
                    <label style="margin-bottom: 1em;">
                        <input type="radio" name="templateCreation" value="skip{{modalVariantAndState.modalVariant}}"
                               id="skipArtifactTemplateOrPolicyTemplateInput"
                               [(ngModel)]="modalSelectedRadioButton"/>
                        Do not create a template.
                    </label>
                    <p *ngIf="modalVariantAndState.modalVariant === 'deployment_artifacts'"
                       class="help-block">Check if you want to point to an image library.</p>
                </div>
            </fieldset>
            <fieldset>
                <div class="form-group-grouping"
                     *ngIf="modalSelectedRadioButton === 'createArtifactTemplate' && modalVariantAndState.modalVariant === 'deployment_artifacts'">

                    <!-- createArtifactTemplate class is required for artifactcreationdialog -->
                    <div class="form-group createArtifactTemplate">
                        <label for="artifactTemplateNS" class="control-label">Namespace</label>
                        <input [(ngModel)]="deploymentArtifactOrPolicyModalData.modalTemplateNameSpace" type="text"
                               class="form-control"
                               name="artifactTemplateNS"
                               id="artifactTemplateNS"
                               (keyup)="checkIfArtifactTemplateAlreadyExists($event, 'namespace')"
                               [typeahead]="allNamespaces"
                               typeaheadOptionField="namespace"/>
                    </div>

                    <!-- createArtifactTemplate class is required for artifactcreationdialog -->
                    <div class="form-group createArtifactTemplate">
                        <label>Artifact Template Name</label>
                        <!-- name is an NCName -->
                        <input [(ngModel)]="deploymentArtifactOrPolicyModalData.modalTemplateName"
                               class="artifactData form-control"
                               id="artifactTemplateName" name="artifactTemplateName" type="text" required
                               autocomplete="on"
                               (keyup)="checkIfArtifactTemplateAlreadyExists($event, 'templateName')"
                               placeholder="Enter a name for the Artifact Template"
                               #artifactTemplateName="ngModel"/>
                        <div id="artifactTemplateNameIsValid" class="invalid">
                            <span id="artifactTemplateNameIsInvalidReason"></span>
                        </div>
                        <div class="alert alert-info"
                             *ngIf="artifactTemplateAlreadyExists && (artifactTemplateName.dirty || artifactTemplateName.touched) &&
                            artifactTemplateName.valid">
                            Artifact Template with this name already exists.
                        </div>
                        <div class="alert alert-success"
                             *ngIf="!artifactTemplateAlreadyExists && (artifactTemplateName.dirty || artifactTemplateName.touched) &&
                            artifactTemplateName.valid">
                            Will be created.
                        </div>
                    </div>
                </div>
                <!-- link ArtifactTemplate or PolicyTemplate -->
                <ng-container *ngIf="modalSelectedRadioButton === 'linkdeployment_artifacts' ||
                                     modalSelectedRadioButton === 'linkpolicies' ||
                                     modalVariantForEditDeleteTasks !== '(none)'">
                    <div id="linkArtifactTemplateOrPolicyTemplate" class="form-group">
                        <label *ngIf="modalVariantAndState.modalVariant === 'deployment_artifacts' ||
                                      modalVariantForEditDeleteTasks === 'deployment_artifacts'"
                               for="artifactTemplateOrPolicyTemplateToLink">Artifact Template</label>
                        <label *ngIf="modalVariantAndState.modalVariant === 'policies' ||
                                      modalVariantForEditDeleteTasks === 'policies'"
                               for="artifactTemplateOrPolicyTemplateToLink">Policy Template</label>
                        <input type="text"
                               class="form-control"
                               *ngIf="modalVariantForEditDeleteTasks !== '(none)'"
                               [disabled]="modalVariantForEditDeleteTasks !== '(none)'"
                               [value]="deploymentArtifactOrPolicyModalData.modalTemplateName">
                        <div id="artifactTemplateOrPolicyTemplateToLinkDiv"
                             *ngIf="modalVariantForEditDeleteTasks === '(none)'">
                            <select id=artifactTemplateOrPolicyTemplateToLink name="artifactTemplateOrPolicyTemplate"
                                    class="form-control"
                                    [(ngModel)]="defaultValue"
                                    required
                                    (change)="updatedTemplateToBeLinkedInModal($event.target.value, modalVariantAndState.modalVariant)">
                                <ng-container *ngIf="modalVariantAndState.modalVariant === 'deployment_artifacts'">
                                    <option *ngIf="deploymentArtifactOrPolicyModalData.artifactTemplates === undefined"
                                            value="null" disabled="true" [selected]="true">Artifact Templates are still
                                        loading...
                                    </option>

                                    <option
                                        *ngFor="let artifactTemplate of deploymentArtifactOrPolicyModalData.artifactTemplates"
                                        [value]="artifactTemplate | json"
                                        [disabled]="modalVariantForEditDeleteTasks !== '(none)'">
                                        {{artifactTemplate.name}}
                                    </option>
                                </ng-container>
                                <ng-container *ngIf="modalVariantAndState.modalVariant === 'policies'">
                                    <option
                                        *ngFor="let policyTemplate of deploymentArtifactOrPolicyModalData.policyTemplates"
                                        [value]="policyTemplate | json"
                                        [disabled]="modalVariantForEditDeleteTasks !== '(none)'">
                                        {{policyTemplate.name}}
                                    </option>
                                </ng-container>
                            </select>
                            <i *ngIf="deploymentArtifactOrPolicyModalData.artifactTemplates === undefined"
                               class="fa fa-refresh fa-spin"></i>
                            <a href="#" target="_blank" class="btn btn-info btn-sm" id="viewArtifactTemplateToLink"
                               (click)="clickArtifactRef()">open</a>
                        </div>
                    </div>
                </ng-container>
            </fieldset>
            <fieldset id="artifactTypeFieldset">
                <div class="form-group" id="artifactTypeOrPolicyTypeDiv">
                    <label
                        *ngIf="modalVariantAndState.modalVariant === 'deployment_artifacts' || modalVariantForEditDeleteTasks === 'deployment_artifacts'"
                        for="artifactTypeOrPolicyTypeField">Artifact Type</label>
                    <label
                        *ngIf="modalVariantAndState.modalVariant === 'policies' || modalVariantForEditDeleteTasks === 'policies'"
                        for="artifactTypeOrPolicyTypeField">Policy Type</label>

                    <input type="text"
                           class="form-control"
                           *ngIf="modalSelectedRadioButton === 'linkpolicies' || modalSelectedRadioButton === 'linkdeployment_artifacts' || modalVariantForEditDeleteTasks != '(none)'"
                           [disabled]="true"
                           [ngModel]="deploymentArtifactOrPolicyModalData.modalType"
                           name="artifactTypeOrPolicyTypeField"
                           placeholder="Select a Template to see its Type."
                           id="artifactTypeOrPolicyTypeField">
                    <select [(ngModel)]="deploymentArtifactOrPolicyModalData.modalType"
                            *ngIf="modalVariantForEditDeleteTasks === '(none)' &&
                            (modalSelectedRadioButton === 'skippolicies' ||
                            modalSelectedRadioButton === 'skipdeployment_artifacts' ||
                            modalSelectedRadioButton === 'createArtifactTemplate')"
                            name="artifactTypeOrPolicyTypeChooser"
                            class="form-control"
                            id="artifactTypeOrPolicyTypeChooser"
                            type="text"
                            required="required"
                            (change)="onChangeArtifactTypeOrPolicyTypeInModal($event.target.value, modalVariantAndState.modalVariant)">
                        <ng-container *ngIf="modalVariantAndState.modalVariant === 'deployment_artifacts'">
                            <option *ngFor="let artifactType of deploymentArtifactOrPolicyModalData.artifactTypes"
                                    [value]="artifactType.qName">{{artifactType.name}}
                            </option>
                        </ng-container>
                        <ng-container *ngIf="modalVariantAndState.modalVariant === 'policies'">
                            <option *ngFor="let policyType of deploymentArtifactOrPolicyModalData.policyTypes"
                                    [value]="policyType.qName">{{policyType.name}}
                            </option>
                        </ng-container>
                    </select>
                </div>
            </fieldset>
        </form>
    </winery-modal-body>

    <!-- DEPLOYMENT_ARTIFACTS OR POLICIES FOOTER -->
    <winery-modal-footer [showDefaultButtons]="false">
        <button type="button"
                id="cancelDeploymentArtifacts"
                class="btn btn-default"
                (click)="resetDeploymentArtifactOrPolicyModalData()">
            Cancel
        </button>
        <button *ngIf="modalVariantForEditDeleteTasks === '(none)'"
                type="button"
                class="btn btn-primary"
                (click)="addDeploymentArtifactOrPolicy()"
                [disabled]="!addDeploymentArtifactOrPolicyForm.valid">
            Add
        </button>
        <button *ngIf="modalVariantForEditDeleteTasks !== '(none)'"
                type="button"
                class="btn btn-danger"
                (click)="deleteDeploymentArtifactOrPolicy()">
            Delete
        </button>
    </winery-modal-footer>
</winery-modal>
